<template>
<div>
    <el-card>
        <el-card class="box-card">
            <div slot="header">
                <span @click="back"><i class="el-icon-back" style="font-weight: bold"></i></span>
                <h1 style="display: inline-block; margin-left: 10px; font-weight: bold">上门取送车订单</h1>
            </div>
            <div class="clearfix" slot="">
                <span class="header">订单编号:</span>
                <span style="float: right" class="header">订单状态：待接单</span>
            </div>
            <div style="margin-top: 20px"></div>
            <div style="padding-left: 100px">
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">外部订单编号：EER0001</el-col>
                    <el-col :span="8">订单类型：预约单</el-col>
                    <el-col :span="8">预约出发时间： 2021-10-21 17:25:27</el-col>
                </el-row>
                <div style="margin-top: 24px"></div>
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">需要司机数量： 1</el-col>
                    <el-col :span="8">终点联系人手机号： 18743223452</el-col>
                    <el-col :span="8">下单人姓名： 张三</el-col>
                </el-row>
                <div style="margin-top: 24px"></div>
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">下单人手机号： 18926384529</el-col>
                </el-row>
                <div style="margin-top: 24px"></div>
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">起点名称： 凯捷</el-col>
                    <el-col :span="8">起点地址： 大润发</el-col>
                </el-row>
                <div style="margin-top: 24px"></div>
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">终点名称： 德玛西亚</el-col>
                    <el-col :span="8">终点地址： 诺克萨斯</el-col>
                </el-row>
                <div style="margin-top: 24px"></div>
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">备注：哈哈哈</el-col>
                    <el-col :span="8"> <el-button>查看验车照片</el-button> </el-col>
                </el-row>
            </div>
        </el-card>
        <div style="margin-top: 20px"></div>
        <el-card class="box-card">
            <div class="clearfix" slot="">
                <span class="header">预估信息</span>
            </div>
            <div style="margin-top: 20px"></div>
            <div style="padding-left: 100px">
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">预估金额：0.00</el-col>
                    <el-col :span="8">预估里程数：</el-col>
                    <el-col :span="8">预估时间： 2021-10-21 17:25:27</el-col>
                </el-row>
            </div>
        </el-card>
        <div style="margin-top: 20px"></div>
        <el-card class="box-card">
            <div class="clearfix" slot="">
                <span class="header">预估信息</span>
            </div>
            <div style="margin-top: 20px"></div>
            <div style="padding-left: 100px">
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">司机信息：0.00</el-col>
                    <el-col :span="8">预估里程数：</el-col>
                    <el-col :span="8">预估时间： 2021-10-21 17:25:27</el-col>
                </el-row>
            </div>
        </el-card>
        <div style="margin-top: 20px"></div>
        <el-card class="box-card">
            <div class="clearfix" slot="">
                <span class="header">账单信息</span>
            </div>
            <div style="margin-top: 20px"></div>
            <div style="padding-left: 100px">
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="8">总金额：0.00</el-col>
                    <el-col :span="8">里程数：</el-col>
                    <el-col :span="8">行驶时间： 2021-10-21 17:25:27</el-col>
                </el-row>
                <el-row :gutter="20"  style="text-align: left;font-size: 14px">
                    <el-col :span="24">费用明细
                    </el-col>
                </el-row>
            </div>
            <el-divider></el-divider>
            <el-row :gutter="20">
                <el-col :span="6" >
                    <el-table
                            :data="tableData"
                            style="width: 100%;"
                            align="center"
                            >
                        <el-table-column
                                prop="dat"
                                label="日期"
                                width="180"
                        >
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="6">
                    <el-table
                            :data="tableData"
                            style="width: 100%;"
                    align="center">
                        <el-table-column
                                prop="dat"
                                label="日期"
                                width="180">
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="6">
                    <el-table
                            :data="tableData"
                            style="width: 100%;"
                            align="center">
                        <el-table-column
                                prop="dat"
                                label="日期"
                                width="180">
                        </el-table-column>
                    </el-table>
                </el-col>
                <el-col :span="6">
                    <el-table
                            :data="tableData"
                            style="width: 100%;"
                            align="center">
                        <el-table-column
                                prop="dat"
                                label="日期"
                                width="180">
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
    </el-card>
</div>
</template>

<script>
export default {
  name: 'Details',
  components: { },
  data () {
    return {
      tableData: [
        {
          dat: 'wangx',
          name: '哈哈',
          address: '1111111'
        }
      ]
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.header{
    font-weight: bold;
    font-size: 1.5em;
}
    .el-icon-back{
        cursor: pointer;
    }
</style>
